<template>
  <div class="icons-container">
    <el-input v-model="filterText" placeholder="通过中文名称或ClassName模糊搜索"/>
    <div class="block"></div>
    <el-tabs type="border-card">
      <el-tab-pane label="Iconfont Icons">
        <div class="grid">
          <div v-for="item of cpIconfontIcons" :key="item.iconId" @click="handleClipboard(generateIconCode(item.fontClass),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateIconCode(item.fontClass) }}
              </div>
              <div class="icon-item">
                <!--<svg-icon :icon-class="item.fontClass" class-name="disabled" />-->
                <icon :icon-class="item.fontClass" class-name="disabled"></icon>
                <span>{{ item.name }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Element-UI Icons">
        <div class="grid">
          <div v-for="item of cpElementUiIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateElementIconCode(item) }}
              </div>
              <div class="icon-item">
<!--                <i :class="'el-icon-' + item" class-name="disabled"/>-->
                <icon :icon-class="'el-icon-' + item" class-name="disabled"></icon>
                <span>{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clipboard from '@/util/clipboard'
import elementIcons from './element-icons'

export default {
  name: 'Icons',
  data() {
    return {
      filterText: '',
      iconfontIcons: [],
      elementIcons
    }
  },
  computed: {
    cpIconfontIcons() {
      if (this.filterText == '') {
        return this.iconfontIcons
      }
      return this.iconfontIcons.filter(icon => {
        return icon.fontClass.toLowerCase().indexOf(this.filterText.toLowerCase()) != -1
            || icon.name.toLowerCase().indexOf(this.filterText.toLowerCase()) != -1
      })
    },
    cpElementUiIcons() {
      if (this.filterText == '') {
        return this.elementIcons
      }
      return this.elementIcons.filter(icon => {
        return icon.toLowerCase().indexOf(this.filterText.toLowerCase()) != -1
      })
    }
  },
  methods: {
    generateIconCode(symbol) {
      return `<icon icon-class="${symbol}" />`
    },
    generateElementIconCode(symbol) {
      return `<icon icon-class="el-icon-${symbol}" />`
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  },
  mounted() {
    this.$ajax.get('/program/icons/all').then(resp => {
      if (!resp.success) {
        this.iconfontIcons = []
        return
      }
      // this.iconfontIcons = resp.data.glyphs.map(glyph => glyph.fontClass)
      this.iconfontIcons = resp.data.glyphs
    })
  }
}
</script>

<style lang="scss" scoped>
  .icons-container {
    margin: 10px 20px 0;
    .grid {
      height: 70vh;
      overflow-y: scroll;
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .icon-item {
      margin: 20px;
      height: 85px;
      text-align: center;
      width: 100px;
      float: left;
      font-size: 30px;
      color: #24292e;
      cursor: pointer;
    }
    span {
      display: block;
      font-size: 16px;
      margin-top: 10px;
    }
    .disabled {
      pointer-events: none;
    }
  }
</style>
